<template>
  <div class="dashboard-main">
    <div class="dashboard-header">
      <div class="header-left">
        <h1 class="page-title">测试仪表盘</h1>
        <div class="breadcrumb">
          <span>首页</span>
          <span class="separator">/</span>
          <span class="active">仪表盘</span>
        </div>
      </div>
      <div class="header-right">
        <div class="date-range">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="date-icon">
            <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
            <line x1="16" y1="2" x2="16" y2="6" />
            <line x1="8" y1="2" x2="8" y2="6" />
            <line x1="3" y1="10" x2="21" y2="10" />
          </svg>
          <span>最近30天</span>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="dropdown-icon">
            <polyline points="6 9 12 15 18 9" />
          </svg>
        </div>
        <button class="export-btn">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="export-icon">
            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
            <polyline points="7 10 12 15 17 10" />
            <line x1="12" y1="15" x2="12" y2="3" />
          </svg>
          导出报告
        </button>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="dashboard-content">
      <!-- 用户信息卡片（根据登录状态显示） -->
      <div v-if="isLoggedIn" class="user-info-card">
        <div class="user-info-header">
          <div class="user-avatar">
            <img src="/picture/管理员.png" alt="用户头像" class="avatar-image" />
          </div>
          <div class="user-details">
            <h2>欢迎回来，冰酱</h2>
            <p>高级测试开发工程师</p>
          </div>
        </div>
        <div class="user-stats">
          <div class="stat-item">
            <span class="stat-number">{{ userStats.activeProjects }}</span>
            <span class="stat-label">活跃项目</span>
          </div>
          <div class="stat-item">
            <span class="stat-number">{{ userStats.thisMonthExecutions }}</span>
            <span class="stat-label">本月执行</span>
          </div>
          <div class="stat-item">
            <span class="stat-number">{{ userStats.passRate }}%</span>
            <span class="stat-label">通过率</span>
          </div>
        </div>
      </div>
      
      <!-- 未登录状态 -->
      <div v-else class="login-prompt-card">
        <div class="prompt-content">
          <div class="prompt-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
              <circle cx="9" cy="7" r="4" />
              <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
              <path d="M16 3.13a4 4 0 0 1 0 7.75" />
            </svg>
          </div>
          <div class="prompt-text">
            <h2>欢迎使用测试管理平台</h2>
            <p>请登录查看您的个人仪表盘和测试数据</p>
          </div>
          <button class="login-btn">登录</button>
        </div>
      </div>

      <!-- 统计数据卡片 -->
      <div class="stats-cards">
        <div class="stat-card">
          <div class="stat-card-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <rect x="4" y="4" width="16" height="16" rx="2" ry="2" />
              <rect x="9" y="9" width="6" height="6" />
              <line x1="9" y1="2" x2="9" y2="4" />
              <line x1="15" y1="2" x2="15" y2="4" />
              <line x1="9" y1="20" x2="9" y2="22" />
              <line x1="15" y1="20" x2="15" y2="22" />
              <line x1="20" y1="9" x2="22" y2="9" />
              <line x1="20" y1="14" x2="22" y2="14" />
              <line x1="2" y1="9" x2="4" y2="9" />
              <line x1="2" y1="14" x2="4" y2="14" />
            </svg>
          </div>
          <div class="stat-card-content">
            <h3 class="stat-card-title">活跃项目</h3>
            <div class="stat-card-value">12</div>
            <div class="stat-card-trend">
              <span class="trend-up">+2</span>
              <span class="trend-text">较上月</span>
            </div>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-card-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
            </svg>
          </div>
          <div class="stat-card-content">
            <h3 class="stat-card-title">本月执行</h3>
            <div class="stat-card-value">156</div>
            <div class="stat-card-trend">
              <span class="trend-up">+18</span>
              <span class="trend-text">较上月</span>
            </div>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-card-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <polyline points="20 6 9 17 4 12" />
            </svg>
          </div>
          <div class="stat-card-content">
            <h3 class="stat-card-title">通过率</h3>
            <div class="stat-card-value">89%</div>
            <div class="stat-card-trend">
              <span class="trend-up">+3%</span>
              <span class="trend-text">较上月</span>
            </div>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-card-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <line x1="18" y1="6" x2="6" y2="18" />
              <line x1="6" y1="6" x2="18" y2="18" />
            </svg>
          </div>
          <div class="stat-card-content">
            <h3 class="stat-card-title">失败案例</h3>
            <div class="stat-card-value">18</div>
            <div class="stat-card-trend">
              <span class="trend-down">-5</span>
              <span class="trend-text">较上月</span>
            </div>
          </div>
        </div>
      </div>

      <!-- API测试分析区域 -->
      <div class="api-analysis-section">
        <div class="section-header">
          <h2 class="section-title">API测试分析</h2>
          <div class="section-actions">
            <button class="section-btn">查看详情</button>
          </div>
        </div>
        
        <!-- API覆盖率图表区域 -->
        <div class="api-charts-wrapper">
          <ApiCoverageChart 
            :coverage="apiStats.coverage" 
            :totalApiCount="apiStats.total" 
            :testPassRate="apiStats.passRate" 
          />
        </div>
        
        <!-- API测试数据表格 -->
        <div class="api-table-wrapper">
          <div class="table-header">
            <h3 class="table-title">API测试数据</h3>
            <div class="table-controls">
              <div class="table-search">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="search-icon">
                  <circle cx="11" cy="11" r="8" />
                  <line x1="21" y1="21" x2="16.65" y2="16.65" />
                </svg>
                <input type="text" placeholder="搜索API" class="search-input" />
              </div>
              <select class="table-filter">
                <option>全部API</option>
                <option>已测试</option>
                <option>未测试</option>
              </select>
            </div>
          </div>
          <div class="table-content">
            <table class="api-table">
              <thead>
                <tr>
                  <th>API名称</th>
                  <th>测试状态</th>
                  <th>通过率</th>
                  <th>响应时间</th>
                  <th>最后测试时间</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="api in recentApis" :key="api.id">
                  <td>{{ api.name }}</td>
                  <td>
                    <span class="status-badge" :class="api.status">{{ api.status }}</span>
                  </td>
                  <td>
                    <div class="pass-rate-cell">
                      <div class="pass-rate-bar">
                        <div class="pass-rate-fill" :style="{ width: api.passRate + '%' }"></div>
                      </div>
                      <span class="pass-rate-text">{{ api.passRate }}%</span>
                    </div>
                  </td>
                  <td>{{ api.responseTime }}</td>
                  <td>{{ api.lastTested }}</td>
                  <td>
                    <button class="view-btn">查看</button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { computed } from 'vue'
import { useUserStore } from '../stores/user'
import ApiCoverageChart from '../components/ApiCoverageChart.vue'
import CircularChart from '../components/CircularChart.vue'

export default {
  name: 'DashboardMain',
  components: {
    ApiCoverageChart,
    CircularChart
  },
  setup() {
    const userStore = useUserStore()
    
    // 从用户存储中获取登录状态
    const isLoggedIn = computed(() => userStore.isLoggedIn)
    
    // 模拟用户统计数据
    const userStats = {
      activeProjects: 12,
      thisMonthExecutions: 156,
      passRate: 89
    }
    
    // 模拟API统计数据
    const apiStats = {
      coverage: 85,
      total: 150,
      passRate: 92
    }
    
    // 模拟最近API测试数据
    const recentApis = [
      {
        id: 1,
        name: '用户管理API',
        status: '已测试',
        passRate: 95,
        responseTime: '245ms',
        lastTested: '2023-06-15 14:30'
      },
      {
        id: 2,
        name: '订单管理API',
        status: '已测试',
        passRate: 90,
        responseTime: '320ms',
        lastTested: '2023-06-15 13:45'
      },
      {
        id: 3,
        name: '商品管理API',
        status: '已测试',
        passRate: 92,
        responseTime: '185ms',
        lastTested: '2023-06-14 16:20'
      },
      {
        id: 4,
        name: '支付API',
        status: '已测试',
        passRate: 88,
        responseTime: '290ms',
        lastTested: '2023-06-14 11:10'
      }
    ]
    
    return {
      isLoggedIn,
      userStats,
      apiStats,
      recentApis
    }
  }
}
</script>

<style scoped>
/* 仪表盘头部样式 */
.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e2e8f0;
}

.header-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.page-title {
  font-size: 24px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #64748b;
}

.separator {
  color: #94a3b8;
}

.active {
  color: #4361ee;
  font-weight: 500;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.date-range {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.date-range:hover {
  background: #f1f5f9;
}

.date-icon, .dropdown-icon {
  width: 16px;
  height: 16px;
  color: #64748b;
}

/* 按钮样式 */
.export-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #4361ee;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(67, 97, 238, 0.2);
}

.export-btn:hover {
  background: #3a56d4;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(67, 97, 238, 0.3);
}

.export-icon {
  width: 16px;
  height: 16px;
}

.login-btn {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  transition: all 0.3s ease;
  margin-top: 12px;
}

.login-btn:hover {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  transform: translateY(-1px);
}

.section-btn {
  padding: 8px 16px;
  background: #f8f9fa;
  color: #4361ee;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.section-btn:hover {
  background: #f1f5f9;
  border-color: #4361ee;
}

.view-btn {
  padding: 6px 12px;
  background: #f8f9fa;
  color: #4361ee;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.view-btn:hover {
  background: #f1f5f9;
  border-color: #4361ee;
}

/* 用户信息卡片样式 - 根据整体风格优化 */
.user-info-card {
  background: linear-gradient(135deg, #ffffff 0%, #fafbff 100%);
  border-radius: 20px;
  padding: 32px;
  /* 多层阴影效果 - 增强立体感 */
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 4px 8px rgba(0, 0, 0, 0.08),
    0 8px 24px rgba(67, 97, 238, 0.05);
  border: 1px solid rgba(67, 97, 238, 0.1);
  /* 增加下边距避免重合 */
  margin-bottom: 32px;
  /* 流畅过渡动画 */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* 现代感边框渐变 */
  background-clip: padding-box;
  position: relative;
  overflow: hidden;
}

.user-info-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #4361ee, #7c3aed, #10b981);
  border-radius: 20px 20px 0 0;
}

/* 交互悬停效果 */
.user-info-card:hover {
  transform: translateY(-4px);
  box-shadow: 
    0 2px 6px rgba(0, 0, 0, 0.15),
    0 8px 16px rgba(0, 0, 0, 0.12),
    0 16px 32px rgba(67, 97, 238, 0.1);
  border-color: rgba(67, 97, 238, 0.2);
}

.user-info-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(67, 97, 238, 0.08);
}

.user-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #ffffff;
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(67, 97, 238, 0.15);
  transition: all 0.3s ease;
  position: relative;
}

.user-avatar:hover {
  transform: scale(1.05);
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.15),
    0 0 0 2px rgba(67, 97, 238, 0.2);
}

.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.user-avatar:hover .avatar-image {
  transform: scale(1.1);
}

.user-details h2 {
  margin: 0 0 6px 0;
  font-size: 22px;
  font-weight: 700;
  color: #1e293b;
  background: linear-gradient(135deg, #1e293b, #4361ee);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.user-details p {
  margin: 0;
  font-size: 15px;
  color: #64748b;
  font-weight: 500;
  opacity: 0.9;
}

.user-stats {
  display: flex;
  gap: 40px;
  margin-top: 8px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(67, 97, 238, 0.05), rgba(124, 58, 237, 0.05));
  border: 1px solid rgba(67, 97, 238, 0.1);
  transition: all 0.3s ease;
  min-width: 100px;
}

.stat-item:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, rgba(67, 97, 238, 0.08), rgba(124, 58, 237, 0.08));
  border-color: rgba(67, 97, 238, 0.2);
  box-shadow: 0 4px 12px rgba(67, 97, 238, 0.1);
}

.stat-number {
  font-size: 24px;
  font-weight: 700;
  color: #4361ee;
  margin-bottom: 4px;
  line-height: 1;
}

.stat-label {
  font-size: 13px;
  color: #64748b;
  font-weight: 500;
  text-align: center;
}

/* 登录提示卡片样式 - 与用户卡片保持一致风格 */
.login-prompt-card {
  background: linear-gradient(135deg, #ffffff 0%, #fafbff 100%);
  border-radius: 20px;
  padding: 40px 32px;
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 4px 8px rgba(0, 0, 0, 0.08),
    0 8px 24px rgba(67, 97, 238, 0.05);
  border: 1px solid rgba(67, 97, 238, 0.1);
  margin-bottom: 32px;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.login-prompt-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #8b5cf6, #7c3aed);
  border-radius: 20px 20px 0 0;
}

.login-prompt-card:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 2px 6px rgba(0, 0, 0, 0.15),
    0 8px 16px rgba(0, 0, 0, 0.12),
    0 16px 32px rgba(139, 92, 246, 0.1);
}

.prompt-content {
  max-width: 300px;
  margin: 0 auto;
}

.prompt-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.prompt-icon svg {
  width: 32px;
  height: 32px;
  color: #64748b;
}

.prompt-text h2 {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
}

.prompt-text p {
  margin: 0 0 16px 0;
  font-size: 14px;
  color: #64748b;
}

/* 统计卡片样式 - 增加与用户卡片的间距 */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
  /* 确保与用户卡片有足够间距 */
  margin-top: 8px;
}

.stat-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.stat-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.stat-card-icon svg {
  width: 24px;
  height: 24px;
  color: #4361ee;
}

.stat-card-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stat-card-title {
  font-size: 14px;
  color: #64748b;
  margin: 0;
  font-weight: 500;
}

.stat-card-value {
  font-size: 28px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1;
}

.stat-card-trend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
}

.trend-up {
  color: #10b981;
  font-weight: 600;
}

.trend-down {
  color: #ef4444;
  font-weight: 600;
}

.trend-text {
  color: #64748b;
}

/* API分析区域样式 - 解决卡片重叠问题 */
.api-analysis-section {
  margin-bottom: 32px;
}

/* API图表包装器 - 增加下边距分离图表和表格 */
.api-charts-wrapper {
  margin-bottom: 32px;
  padding-bottom: 8px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
}

.section-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* API表格样式 - 与图表明确分离 */
.api-table-wrapper {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 4px 8px rgba(0, 0, 0, 0.08),
    0 8px 24px rgba(67, 97, 238, 0.05);
  border: 1px solid rgba(67, 97, 238, 0.1);
  overflow: hidden;
  margin-top: 8px;
  transition: all 0.3s ease;
}

.api-table-wrapper:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 2px 6px rgba(0, 0, 0, 0.15),
    0 8px 16px rgba(0, 0, 0, 0.12),
    0 16px 32px rgba(67, 97, 238, 0.1);
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8f9fa;
}

.table-title {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
}

.table-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.table-search {
  position: relative;
}

.table-search .search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  width: 16px;
  height: 16px;
}

.search-input {
  padding: 8px 12px 8px 36px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 14px;
  width: 200px;
  transition: all 0.2s ease;
}

.search-input:focus {
  outline: none;
  border-color: #4361ee;
  box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
}

.table-filter {
  padding: 6px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 13px;
  background: white;
  cursor: pointer;
}

.table-content {
  overflow-x: auto;
}

.api-table {
  width: 100%;
  border-collapse: collapse;
}

.api-table th {
  background: #f8f9fa;
  padding: 12px 16px;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: #4b5563;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
}

.api-table td {
  padding: 12px 16px;
  font-size: 14px;
  color: #1e293b;
  border-bottom: 1px solid #f1f5f9;
}

.api-table tr:hover {
  background: #f8fafc;
}

.status-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.status-badge.已测试 {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.status-badge.未测试 {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.pass-rate-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pass-rate-bar {
  flex: 1;
  height: 6px;
  background: #f1f5f9;
  border-radius: 3px;
  overflow: hidden;
}

.pass-rate-fill {
  height: 100%;
  background: #10b981;
  border-radius: 3px;
}

.pass-rate-text {
  font-size: 13px;
  font-weight: 500;
  min-width: 40px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .stats-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .user-stats {
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .dashboard-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .header-right {
    width: 100%;
    justify-content: space-between;
  }
  
  /* 用户卡片移动端优化 */
  .user-info-card {
    padding: 24px 20px;
    margin-bottom: 24px;
  }
  
  .user-info-header {
    flex-direction: column;
    text-align: center;
    gap: 16px;
    padding-bottom: 16px;
  }
  
  .user-avatar {
    width: 60px;
    height: 60px;
    align-self: center;
  }
  
  .login-prompt-card {
    padding: 32px 20px;
    margin-bottom: 24px;
  }
  
  .stats-cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .user-stats {
    flex-direction: column;
    gap: 12px;
  }
  
  .stat-item {
    padding: 12px;
    min-width: auto;
    width: 100%;
  }
  
  .table-controls {
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }
  
  .search-input {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .user-info-card {
    border-radius: 16px;
    padding: 20px 16px;
  }
  
  .user-stats {
    gap: 8px;
  }
  
  .stat-item {
    padding: 10px;
    border-radius: 8px;
  }
  
  .stat-number {
    font-size: 20px;
  }
  
  .stat-label {
    font-size: 12px;
  }
}
</style>